<template>
	<view class="release">
		<view class="nav">
			<u-tabs :list="typeArr" @click="change" activeStyle="#FFDF41" lineColor="#FFDF41" :scrollable="scroll">
			</u-tabs>
		</view>

		<scroll-view scroll-y="true" class="main" @scrolltolower="lower()">
			<view class="list" v-for="(item,index) of list">
				<image v-if="info && info.avatar" :src="oss(info.avatar)" mode="aspectFill" class="avatar"></image>
				<view class="info">
					<view class="name" v-if="info.nickname">{{info.nickname}}</view>
					<view class="time">{{item.createtime | date }}</view>
					<view class="content">{{item.name}}</view>
					<u-album :urls="item.images" keyName="src2"></u-album>
					<view class="btns">
						<view class="btn" v-if="type == 1" @click="down(item.id)">下架</view>
						<view class="btn" v-if="type == 1" @click="top(item.id)">置顶</view>
						<view class="btn" v-if="type == -1" @click="authTo(`pages/forum/forum?id=${item.id}`)">重新编辑
						</view>
					</view>
					
					<view class="btns">
						<view class="btn" v-if="item.switch == 1">置顶到期时间：{{item.toptime | date('yyyy-mm-dd hh:MM')}}</view>
					</view>
				</view>

			</view>
			<u-empty v-if="list.length === 0 && finish" mode="data" marginTop="100">
			</u-empty>
			<!-- <u-popup :show="show" @close="show = false" mode="center" :round="20">
				<view class="serveBox" v-if="show">
					<view class="serve_tit">
						请选择置顶套餐
					</view>
					<view class="tc-img">
						<image :src="oss(meal[0].image)" mode="aspectFill"></image>
					</view>
					<view class="serve_cont">
						<view style="min-width: 200rpx;text-align: center;border-radius: 20rpx;background-color: #FFF7F5;margin-left: 24rpx;border: 2px solid #FFF7F5;" v-for="(i,index) in meal" :class="{active: current === index}" @click="cutitem(index,i.id)">
								<view style="font-size: 26rpx;padding-top: 32rpx;">{{i.day}}天</view>
								<view style="font-size: 22rpx;color: #FC6605;padding-top: 16rpx;">￥ <text style="font-size: 36rpx;font-weight: 500;">{{i.num}}</text> <text v-if="i.original_num!=0" style="text-decoration: line-through;color: #aaa;">￥{{i.original_num}}</text> </view>
								<view style="height: 60rpx;width: 1rpx;"></view>
								<view style="background-color: #FF7A7A;color: #FFF;font-size: 24rpx;border-radius: 0 0 20rpx 20rpx;padding: 8rpx 0;"> 约{{i.day_num}}/天 </view>
						</view>
						
					</view>
					<view class="tc-btn-box">
						<view class="tc-btn1" @click="ckeck">购买置顶</view>
						<view class="tc-btn2" @click="show = false">关闭</view>
					</view>
					<view style="height: 24rpx;width: 1rpx;"></view>
				</view>
			</u-popup> -->
			
			<TopPopup :show1="show" @padlock="show = false" :meal="meal" @ckeck="ckeck" :title="false"></TopPopup>
		</scroll-view>
		<!-- <image src="../../static/add.png" class="add" mode="" @click="authTo('pages/forum/forum')"></image> -->
	</view>
</template>
<script>
	import TopPopup from "@/components/topPopup.vue"
	export default {
		components: { TopPopup },
		data() {
			return {
				current: -2,
				show: false,
				typeArr: [{
						id: 0,
						name: '待审核'
					},
					{
						id: 1,
						name: '上架中'
					},
					{
						id: 2,
						name: '已下架'
					},
					{
						id: -1,
						name: '审核拒绝'
					}
				],
				scroll: false,
				page: 1,
				finish: false,
				type: 0,
				list: [],
				meal: [],
				info: '',
				id: '',
				itemid:'',
				
				myMoney:'',
				paytype:null
			};
		},
		mounted() {
			let that = this
			uni.$on('editinfo', function(data) {
				that.reload()
			})
		},
		onLoad() {
			this.getcombo()
			this.getList()
			this.getInfo()
			
			this.getMoney()
			// #ifdef MP-WEIXIN
			this.paytype = 2
			// #endif
			// #ifdef APP
			this.paytype = 1
			// #endif
		},
		methods: {
			getMoney(){
				uni.$u.http.post('/getmoney ').then(res => {
					if (res.code === 1) {
						this.myMoney = res.data
					}
				}).catch((res) => {
					
				})
			},
			cutitem(i,id){
				this.current = i
				this.itemid = id
			},
			getInfo() {
				uni.$u.http.post('/index', ).then(res => {
					if (res.code == 1) {
						// console.log(res.data)
						this.info = res.data
			
					}
				}).catch((res) => {
			
				})
			},
			top(id) {
				this.id = id
				this.show = true
			},
			ckeck(e) {
				if(!e.id) return this.toast('请选择置顶套餐')
			if(this.myMoney < e.money){
				//余额不足 微信支付
				uni.$u.http.post('/meallist', {
					type:0,
					order_id: this.id,
					id:e.id,
					paytype:this.paytype
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						let that = this
						uni.requestPayment({
							appId: res.data.pay.appId,
							nonceStr: res.data.pay.nonceStr,
							package: res.data.pay.package,
							paySign: res.data.pay.paySign,
							signType: res.data.pay.signType,
							timeStamp: res.data.pay.timeStamp,
							success: (e) => {
								that.toast(res.msg)
								that.show = false
								setTimeout(() => {
									uni.navigateBack()
								},500)
							},
							fail: (e) => {
								that.$u.toast('支付失败');
							}
						})
					}
				}).catch((res) => {
						
				})
			}else {
				//余额支付
				uni.$u.http.post('/meallist', {
					type:0,
					order_id: this.id,
					id:e.id,
					paytype:4
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.toast(res.msg)
						this.show = false
						setTimeout(() => {
							uni.navigateBack()
						},500)
					}
				}).catch((res) => {
						
				})
			}
			
				// if(!this.itemid) return this.toast('请选择置顶套餐')
				// uni.$u.http.post('/meallist', {
				// 	type:0,
				// 	order_id: this.id,
				// 	id: this.itemid
				// }).then(res => {
				// 	console.log(res)
				// 	if (res.code == 1) {
				// 		this.toast(res.msg)
				// 		this.show = false
				// 		this.page = 1
				// 		this.finish = false
				// 		this.list = []
				// 		this.getList()
				// 	}
				// }).catch((res) => {

				// })
			},
			down(id) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '信息下架置顶状态会消失',
					success: function(res) {
						if (res.confirm) {
							uni.$u.http.post('/info', {
								id: id,
								type: 'off'
							}).then((res) => {
								uni.$u.toast(res.msg)
								setTimeout(() => {
									that.reload()
								}, 1000)
							}).catch(() => {

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getcombo() {
				uni.$u.http.post('/meallist',{
					mealtype:0
				}).then(res => {
					if (res.code == 1) {
						this.meal = res.data
					}
				}).catch((res) => {
				})
			},
			change(e) {
				this.type = e.id
				this.reload()
			},
			reload() {
				this.page = 1
				this.finish = false
				this.list = []
				this.getList()
			},
			lower() {
				this.page++
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				uni.$u.http.post('/myinfo', {
					page: this.page,
					status: this.type
				}).then(res => {
					if (res.code == 1) {
						// console.log(res.data)
						for (let i = 0; i < res.data.length; i++) {
							if(res.data[i].images) {
								res.data[i].images = res.data[i].images.map(value => {
									return this.oss(value)
								})
							}
						}
						console.log(res.data,888)
						this.list = this.list.concat(res.data)
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.release {
		position: relative;
		height: 100vh;
		// /deep/ .u-tabs__wrapper__nav{
		// 	justify-content: center;
		// }

		/deep/ .u-tabs__wrapper__nav__item__text {
			font-size: 17px;
		}

		.nav {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.add {
			position: fixed;
			right: 30rpx;
			bottom: 100rpx;
			width: 120rpx;
			height: 120rpx;
		}

		.main {
			position: absolute;
			left: 0;
			top: 100rpx;
			overflow: hidden;
			background: #F6F6F6;
			bottom: 0;

			.list {
				display: flex;
				padding: 20rpx;
				background: #fff;

				.avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
				}

				.info {
					flex: 1;

					.name {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 10rpx;
					}

					.time {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 10rpx;
					}

					.content {
						color: #333;
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}

					.btns {
						display: flex;
						flex-direction: row;
						margin-top: 20rpx;

						.btn {
							margin-right: 30rpx;
							font-size: 24rpx;
							color: #E43D33;
						}
					}
				}
			}

			.serveBox {
				width: 690rpx;
				border-radius: 20rpx;

				.serve_tit {
					margin-top: 30rpx;
					text-align: center;
					font-size: 36rpx;
					color: #333333;
					font-weight: bold;
					line-height: 40rpx;
				}
				
				.tc-img {
					width: 600rpx;
					margin: auto;
					image {
						width: 600rpx;
						height: 500rpx;
					}
				}
				
				.serve_cont {
					// margin: 0 30rpx;
					display: flex;
					// flex-wrap: wrap;
					// flex-direction: row;
					
					margin-top: 24rpx;
					overflow: hidden;
					overflow-x: auto;
					white-space: nowrap;
					.serve {
						margin: 30rpx 0;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
						padding: 16rpx 32rpx;
						// width: 190rpx;
						// height: 200rpx;
						box-sizing: border-box;
						border-radius: 20rpx;
						border: 1rpx solid #989898;


						.serve_num {
							margin-bottom: 20rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
							line-height: 45rpx;
						}

						.serve_hour {
							font-size: 28rpx;
							font-weight: 400;
							color: #323232;
							line-height: 40rpx;
						}
					}

					.active {
						border: 2px solid #FF7A7A !important;
					}

				}
				
				.tc-btn-box {
					width: 560rpx;
					margin: auto;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					.tc-btn1 {
						width: 220rpx;
						height: 80rpx;
						background-color: #FBBA45;
						border-radius: 10rpx;
						text-align: center;
						line-height: 80rpx;
					}
					.tc-btn2 {
						width: 220rpx;
						height: 80rpx;
						border-radius: 10rpx;
						text-align: center;
						line-height: 80rpx;
						background-color: #9A9A9A;
						color: #FFF;
					}
				}
			}
		}
	}
</style>
